<template>
  <div>
    <v-breadcrumbs :items="items" divider=">"></v-breadcrumbs>
    <v-layout row>
      <v-flex >
        <h2 align="center">{{ replyData.title }}</h2>
        <v-list two-line>
          <template v-for="(item, index) in replyData.list">
            <v-card :key="index" class="reply">
              <v-list-tile-sub-title>{{item.uname}}   {{item.createTime}}</v-list-tile-sub-title>
              <div v-html="item.content"></div>
              <v-divider :key="index" ></v-divider>
            </v-card>
          </template>
        </v-list>
      </v-flex>
    </v-layout>
    <v-pagination v-model="page" :length="total" :total-visible="7" color="blue lighten-4" @input="load"></v-pagination>
    <div ref="editor" class="reply"></div>
    <v-btn @click="submit">发表回复</v-btn>
  </div>
</template>

<script>
import {restUrl} from '../config/config'
import E from 'wangeditor'
var editor
export default {
  data: function() {
    return {
      items: [
        {
          text: '首页',
          disabled: false,
          href: '/#/'
        },
        {
          text: '列表',
          disabled: false,
          href: '/#/forum/1' 
        },
        {
          text: '回复',
          disabled: true,
          href: 'breadcrumbs_link_1'
        }
      ],
      replyData: {
        title: '',
        list: [
          
        ]
      },
      content: "",
      total: 1,
      page: 1
    }
  },
  created() {
    this.load()
  },
  mounted() {
    editor = new E(this.$refs.editor)
    editor.customConfig.uploadImgServer = '/upload'
    editor.customConfig.onchange = (html) => {
      this.content = html
    }
    editor.create()
  },
  methods: {
    load: function() {
      this.axios.get(restUrl +'/reply/list?tid=' + this.$route.params.tid + '&pageIndex=' + this.page)
            .then(resp => {
              this.replyData = resp.data.data
              this.total = resp.data.total
              this.items = [
                {
                  text: '首页',
                  disabled: false,
                  href: '/#/'
                },
                {
                  text: '列表',
                  disabled: false,
                  href: '/#/forum/' + resp.data.data.fid 
                },
                {
                  text: '回复',
                  disabled: true,
                  href: 'breadcrumbs_link_1'
                }
              ]
              window.scrollTo(0,0);
            })
    },
    submit: function() {
      let reply = {
        content: this.content,
        tid: this.$route.params.tid
      }
      this.axios.post(restUrl + '/reply/create',reply)
       .then(resp =>{
         if (resp.data.code == 0) {
           editor.txt.html('')
           this.load();
         } else {
           this.load();
         }
       })
    }
  }
}
</script>

<style scoped>
  .reply {
    padding-left: 10px;
    padding-right: 10px;
  }
</style>

